import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { Popup } from '@knno/ui/popup';
import { bar } from './index.css';

export function renderPopup() {
	return [
		dom.h2().text('弹出层'),
		dom.div(bar).append(
			button()
				.text('弹出层：右侧-上对齐')
				.ref((btn) => {
					btn.on('click', () => {
						Popup.create(...renderPopup()).show(btn, 'right-top');
					});
				}),
			button()
				.text('弹出层：下侧-左对齐')
				.ref((btn) => {
					btn.on('click', () => {
						Popup.create(...renderPopup()).show(btn, 'bottom-left');
					});
				}),
			button()
				.text('弹出层：下侧-中对齐')
				.ref((btn) => {
					btn.on('click', () => {
						Popup.create(...renderPopup()).show(btn, 'bottom-center');
					});
				}),
			button()
				.text('弹出层：左侧-中对齐')
				.ref((btn) => {
					btn.on('click', () => {
						Popup.create(...renderPopup()).show(btn, 'left-middle');
					});
				})
		),
	];
}
